<template>
  <div class="dashboard-container">
    <div class="dashboard-text">{{ AnswerRecord.testPaperName }}</div>
    <div class="dashboard-statistical">
      <div class="dashboard-list">
        <ul>
          <li>试卷名：{{ AnswerRecord.testPaperName }}</li>
          <li>试卷得分：{{ AnswerRecord.userScore }}</li>
          <li>试卷耗时：{{ AnswerRecord.spendTime }}</li>

          <li>总分：{{ AnswerRecord.testPaperScore }}</li>
        </ul>
      </div>
    </div>
    <div class="dashboard-fan">
      <div id="main"></div>
      <div id="main2"></div>
    </div>
    <div id="main3"></div>
    <div id="main4"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { TestManager } from "../../request/test.js";
export default {
  name: "Dashboard",
  data() {
    return {
      AnswerRecord: this.$route.params.AnswerRecord,
      TestPaperKnowledge: [],
      WrongRecordKnowledge: [],
    };
  },

  mounted() {
    this.active();
  },
  methods: {
    active() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      const weatherIcons = {
        Sunny: ROOT_PATH + "/data/asset/img/weather/sunny_128.png",
        Cloudy: ROOT_PATH + "/data/asset/img/weather/cloudy_128.png",
        Showers: ROOT_PATH + "/data/asset/img/weather/showers_128.png",
      };
      var params = {
        testPaperId: this.AnswerRecord.testPaperId,
      };
      TestManager.getTestPaperKnowledge(this.qs.stringify(params)).then((e) => {
        option = {
          title: {
            text: "试卷知识分布点",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            left: "center",
            bottom: 10,
          },
          series: [
            {
              name: "知识点名",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colors = [
                      "#73c0de",
                      "#00b8a6",
                      "#ff7070",
                      "#5572c9",
                      "#FF8C00",
                      "#FF0000",
                      "#FE8463",
                    ];
                    return colors[params.dataIndex];
                  },
                },
              },
              data: e.data.data,
            },
          ],
        };
        option && myChart.setOption(option);
      });

      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom2 = document.getElementById("main2");
      var myChart2 = echarts.init(chartDom2);
      var option2;

      const weatherIcons2 = {
        Sunny: ROOT_PATH + "/data/asset/img/weather/sunny_128.png",
        Cloudy: ROOT_PATH + "/data/asset/img/weather/cloudy_128.png",
        Showers: ROOT_PATH + "/data/asset/img/weather/showers_128.png",
      };

      var params = {
        testRecordId: this.AnswerRecord.id,
      };
      TestManager.getTestPaperWrongRecordKnowledge(
        this.qs.stringify(params)
      ).then((e) => {
        option2 = {
          title: {
            text: "错题知识分布点",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            left: "center",
            bottom: 10,
          },
          series: [
            {
              name: "知识点名",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: function (params) {
                    let colors = [
                      "#73c0de",
                      "#00b8a6",
                      "#ff7070",
                      "#5572c9",
                      "#FF8C00",
                      "#FF0000",
                      "#FE8463",
                    ];
                    return colors[params.dataIndex];
                  },
                },
              },
              data: e.data.data,
            },
          ],
        };
        option2 && myChart2.setOption(option2);
      });
      var chartDom3 = document.getElementById("main3");
      var myChart3 = echarts.init(chartDom3);
      var option3;
      option3 = {
        title: {
          text: "答题时间线",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ",
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              color: "#73c0de",
              width: "2",
            },
          },
          type: "category",
          data: [
            "第1题",
            "第2题",
            "第3题",
            "第4题",
            "第5题",
            "第6题",
            "第7题",
            "第8题",
            "第9题",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#73c0de",
              width: "2",
            },
          },
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      var chartDom4 = document.getElementById("main4");
      var myChart4 = echarts.init(chartDom4);
      var option4;
	  var params={
		  testRecordId:this.AnswerRecord.id
	  }
	 TestManager.getQuestionScore(this.qs.stringify(params)).then(e=>{
      option4 = {
        title: {
          text: "答题得分",
          x: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ",
        },
        legend: {
          itemStyle: {
            color: "#73c0de",
          },
        },
        xAxis: {
          type: "category",
          data: e.data.data.days,
          axisLine: {
            lineStyle: {
              color: "#73c0de",
              width: "2",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#03d4c0",
              width: "2",
            },
          },
        },
        series: [
          {
            data:e.data.data.totals,
            type: "bar",
          },
        ],
      };
	   option3 && myChart3.setOption(option4);
	  })

     
      option4 && myChart4.setOption(option3);

      this.$nextTick((m) => {
        window.addEventListener(
          "resize",
          function () {
            myChart.resize();
            myChart2.resize();
            myChart3.resize();
            myChart4.resize();
          },
          true
        );
      });
    },
  },
  created() {
    console.log(this.AnswerRecord);
    // this.getTestPaperWrongRecordKnowledge();
    // this.;
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
    background-color: #ffffff;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }

  &-fan {
    display: flex;
    border: 2px solid #ededed;
  }

  &-list {
    width: 100%;
    height: 4.125rem;
    background-color: #ffffff;

    ul {
      height: 100%;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    li {
      padding: 0px 20px;
    }
  }
}

#main {
  width: 50%;
  height: 18.75rem;
  background-color: #ffffff;
}

#main2 {
  width: 50%;
  height: 18.75rem;
  background-color: #ffffff;
}

#main3 {
  width: 100%;
  height: 31.25rem;
  margin-top: 30px;
}

#main4 {
  margin-top: 30px;
  width: 100%;
  height: 31.25rem;
}
</style>
